<template>
  <div>
    <!-- <div class="toptitle">组织编码</div> -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="活动名称">
        <br> <br>
        <el-input v-model="formInline.activityNameQuery" placeholder style="margin-left:-60px;width:200px"></el-input>
      </el-form-item>
      <div class="block" style="margin-bottom: 1.25rem;">
        <span class="demonstration" style="    text-align: right;
    float: left;
    font-size: 12px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;">活动时间</span>
        <br><br>
        <el-date-picker v-model="value4" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions2">
        </el-date-picker>
        <!--  <el-date-picker v-model="value4" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions2"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker> -->
      </div>
      <el-form-item style="margin-left:950px;text-align:right;margin-top:10px;margin-bottom:20px">
        <el-button type="primary" @click="searchData()" size="mini" icon="el-icon-search">查询</el-button>

        <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>

        <el-button type="success" @click="addData()" size="mini" icon="el-icon-s-data">新增</el-button>
      </el-form-item>

    </el-form>
    <el-table :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%;margin-bottom: 20px;"
      row-key="goodsTypeId" border v-loading="loading" default-expand-all>
      <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
      <el-table-column prop="activityName" label="活动名称" width="200" align="center"></el-table-column>

      <el-table-column prop="activityDesc" label="活动说明" align="center" width="500"></el-table-column>

      <el-table-column :formatter="statusEndFormat" label="活动时间" width="250" align="center"></el-table-column>

      <el-table-column :formatter="publishStatus" label="发布状态" align="center" width="180"></el-table-column>

      <el-table-column label="操作" width="280" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="look(scope.row)" type="text">查看</el-button>
          <el-button size="mini" @click="edit(scope.row)" type="text" v-if="scope.row.status===0" >编辑</el-button>
          <el-button size="mini" @click="handleClick(scope.row)" v-if="scope.row.status===0" type="text">发布</el-button>
          <el-button size="mini" @click="handleClick(scope.row)" v-if="scope.row.status===1" type="text">撤回</el-button>
          <!--<el-button size="mini" @click="reset(scope.row)" type="primary">重置密码</el-button>-->
        </template>
      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.current"
        :page-sizes="[10, 20, 30, 50, 100, 150, 200]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import {
    queryPizeActiveConfiguration,
    addMakeWineActivity
  } from "@/api/prizeActivityConfiguration";
  import qs from "qs";
  export default {
    data() {
      return {
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value4: [],
        headers: {
          token: localStorage.getItem("token"), //从cookie里获取token，并赋值  Authorization ，而不是token
        },
        tableData: [],
        listQuery: {
          current: 1,
          size: 10
        },
        logininfo: "",
        orgList: "",
        formInline: {
          ascs: "",
          descs: "",
          activityNameQuery: ""
        },
        loading: false,
        total: 0,

      };
    },
    mounted() {
      this.logininfo = localStorage.getItem("logininfo");
      this.orgList = JSON.parse(this.logininfo).orgList;
      this.search();
    },
    methods: {
      //绑定时间
      statusEndFormat(row, column) {
        let time = row.activityBeginTime + "至" + row.activityEndTime;
        return time;
      },
      //发布状态
      publishStatus(row, column) {
        if (row.status == 1) {
          return "已发布";
        } else {
          return "未发布";
        }
      },

      //查看
      look(row) {
        this.$router.push({
          name: "editActivityConfiguration",
          params: {
            row: row,
            status: 2
          }
        });
      },
      //编辑
      edit(row) {
        this.$router.push({
          name: "editActivityConfiguration",
          params: {
            row: row,
            status: 1
          }
        });
      },
      //发布或者撤回
      handleClick(row) {
        let data = {
          uuid: row.uuid,
          status: row.status == 0 ? 1 : 0,
        };
        addMakeWineActivity(data).then(res => {
          if (res.code == 1) {
            /* 发布 */
             
            if (row.status == 0) {
              this.$message({
                message: '发布成功',
                type: 'success'
              });
            }
            /* 撤回 */
            if (row.status == 1) {
              this.$message({
                message: '撤回成功',
                type: 'success'
              });
            }
            this.searchData();
          } else {
            this.$message.error(res.message);
          }
        });
      },
      //新增
      addData() {
        this.$router.push({
          name: "editActivityConfiguration",
          params: {
            status: 3
          }
        });
      },

      //排序
      /*   handleSort(val) {
           //排序之前将页码重置为1
           this.listQuery.current = 1;

           this.formInline.descs = [];
           this.formInline.ascs = [];
           let sortModel = "";
           if (val.order === "ascending") {
             sortModel = "ASC";
             this.formInline.ascs = [val.column.sortable];
             this.formInline.descs = [];
             this.search();
           } else if (val.order === "descending") {
             sortModel = "DESC";
             this.formInline.ascs = [];
             this.formInline.descs = [val.column.sortable];
             this.search();
           }
         }, */
      // 重置页码查询 查询
      searchData() {
        this.listQuery.current = 1;
        this.search();
      },
      //查询
      search() {
        this.loading = true;
        let data = {
          size: this.listQuery.size,
          current: this.listQuery.current,
          condition: {
            activityBeginTime: !this.value4 ? "" : this.value4.length == 0 ? "" : this.value4[0],
            activityEndTime: !this.value4 ? "" : this.value4.length == 0 ? "" : this.value4[1],
            activityName: this.formInline.activityNameQuery
          },
          /* ascs: this.formInline.ascs,
           descs: this.formInline.descs */
        };
        queryPizeActiveConfiguration(data).then(res => {
          this.total = res.total;
          this.tableData = res.records;
          this.loading = false;
        });
      },
      handleCurrentChange(val) {
        this.listQuery.current = val;
        this.search();
      },
      handleSizeChange(val) {
        this.listQuery.size = val;
        this.search();
      },
      kong() {
        this.value4 = [];
        this.formInline.activityNameQuery = "";
      }
    }
  };
</script>
<style lang="less" scoped>
  .toptitle {
    border: 1px solid #e0e0e0;
    border-bottom: 2px solid #188097;
    background: #f5f5f5;
    line-height: 35px;
    margin-bottom: 10px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: bold;
  }

  .el-form-item .el-select {
    width: 100%;
  }
</style>
